<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
    <meta http-equiv="content-type" content="textml" charset="utf-8">
    <title>iconfont图片引入</title>
    <meta name="Keywords" content="hover, onclick, iconfont">
    <meta name="Description" content="使用到了hover + onclick + iconfont">
    <link rel="stylesheet" media="screen" href="css/clean.css">
    <link rel="stylesheet" media="screen" href="css/iconfont.css">
    <link rel="stylesheet" media="screen" href="css/header.css">
    <link rel="stylesheet" media="screen" href="css/content.css">
</head>
<body>
    <header>
        <div class='header-area'>
            <ul>
                <li>
                    <div class='tips'></div>
                    <span>主题: 作业13</span>
                </li>
                <li>
                    <div class='tips'></div>
                    <span>邮箱: socovo@live.com</span>
                </li>
                <li>
                    <div class='tips'></div>
                    <span>姓名: 宋臣</span>
                </li>
            </ul>
        </div>
    </header>
    <content>
        <div class='wrap'>
            <ul class='title-list'>
                <li class='line-li'>
                    <i class='icon-eye'></i>
                </li>
                <li class='line-li'>
                    <h3 class='title-text'>美图赏析</h3>
                </li>
            </ul>
            <ul class='content-list'>
                <li class='content-li' onclick='location.href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=index&fr=&hs=0&xthttps=111111&sf=1&fmq=&pv=&ic=0&nc=1&z=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&ie=utf-8&word=%E7%BE%8E%E5%A5%B3%E4%BA%BA%E5%83%8F&oq=%E7%BE%8E%E5%A5%B3%E4%BA%BA%E5%83%8F&rsp=-1";'>美女人像</li>
                <li class='content-li' onclick='location.href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1528511151025_R&pv=&ic=0&nc=1&z=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&ie=utf-8&word=%E9%A3%8E%E5%85%89%E4%BA%BA%E6%96%87";'>风光人文</li>
                <li class='content-li' onclick='location.href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1528511253254_R&pv=&ic=0&nc=1&z=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&ie=utf-8&word=%E5%8A%A8%E7%89%A9%E5%BE%AE%E8%B7%9D";'>动物微距</li>
                <li class='content-li' onclick='location.href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1528511275846_R&pv=&ic=0&nc=1&z=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&ie=utf-8&word=%E9%B8%9F%E7%B1%BB%E6%91%84%E5%BD%B1";'>鸟类摄影</li>
                <li class='content-li' onclick='location.href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1528511285664_R&pv=&ic=0&nc=1&z=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&ie=utf-8&word=%E7%BB%BC%E5%90%88%E6%91%84%E5%BD%B1";'>综合摄影</li>
            </ul>
        </div>
    </content>
    <footer></footer>
</body>
</html>